import React, { useEffect, useState, useRef } from 'react';
import { Dropdown, Space } from 'antd';
import { FixedSizeList as List } from 'react-window';
import '../../style/playerLists.css';
import '../../style/kuangjia.css';
import exampleJPG from '../../img/avatar.jpg';

const PlayerLists = () => {
  const [songLists, setSongLists] = useState([]);
  const listRef = useRef(null); // 用于获取列表容器

  useEffect(() => {
    fetch('http://localhost:8088/playing')
      .then((response) => response.json())
      .then((data) => {
        setSongLists(data.data);
      })
      .catch((error) => {
        console.error('Error fetching song data:', error);
      });
  }, []);

  const items = () => [
    {
      key: '1',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
          收藏
        </a>
      ),
    },
    {
      key: '2',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
          下载
        </a>
      ),
    },
    {
      key: '3',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
          添加到歌单
        </a>
      ),
    },
    {
      key: '4',
      label: (
        <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
          删除
        </a>
      ),
    },
  ];

  const renderRow = ({ index, style }) => {
    const item = songLists[index];
    return (
      <li key={index} style={style} className="playerlists_songItem">
        <div className="hideicon5">
          <i className="ri-play-fill"></i>
        </div>
        <div className="hideicon6">
          <i className="ri-heart-3-line"></i>
        </div>
        <div className="hideicon7">
          <Space direction="vertical">
            <Space wrap>
              <Dropdown
                menu={{
                  items: items(),
                }}
                placement="topLeft"
                trigger={['click']}
              >
                <i className="ri-menu-4-line"></i>
              </Dropdown>
            </Space>
          </Space>
        </div>
        <div className="playerlists_songImg">
          <img src={item.coverUrl} alt={item.musicName} />
        </div>
        <div className="song_name">
          <span id="songname">{item.musicName}</span>
          <span id="singer">{item.artName}</span>
        </div>
      </li>
    );
  };

  return (
    <div className="playerlists_con">
      <div className="playerlistsTitle">
        <p>播放队列</p>
      </div>
      <div className="playerLists_main" ref={listRef}>
        <List
          className="playerLists_main"
          height={listRef.current ? listRef.current.clientHeight : 0}
          itemCount={songLists.length}
          itemSize={50}
          width="100%"
        >
          {renderRow}
        </List>
      </div>
    </div>
  );
};

export default PlayerLists;
